<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>流程编排-SSH主机</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/select2/css/select2.min.css">
    <link rel="stylesheet" href="../../plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<!--顶部条-->
<div style="padding: 0 7px 15px 7px" class="clearfix">
    <!--搜索输入框组-->
    <div class="input-group pull-left" style="width: 50%">
        <input id="keyword" class="form-control" type="search" placeholder="名称">
        <div class="input-group-append">
            <button id="search" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
        </div>
    </div>
    <!--新增按钮-->
    <button id="add" class="btn btn-info pull-right"><i class="fa fa-plus"></i> 添加SSH服务器</button>
</div>
<!--数据展示-->
<div class="container-fluid">
    <table id="table" class="table table-sm table-hover table-bordered">
        <thead><tr>
            <th>#</th>
            <th>名称</th>
            <th>IP地址</th>
            <th>端口</th>
            <th>用户名</th>
            <th>CPU架构</th>
            <th>操作系统</th>
            <th style="width: 6em">连接状态</th>
            <th style="width: 6em">责任人</th>
            <th style="width: 8em">操作</th>
        </tr></thead>
        <tbody><tr>
            <td>{{index}}</td>
            <td>{{name}}</td>
            <td>{{host}}</td>
            <td>{{port}}</td>
            <td>{{user}}</td>
            <td>{{arch}}</td>
            <td>{{os}}</td>
            <td><span class="badge {{statusClass}}">{{status}}</span></td>
            <td>{{owner}}</td>
            <td>
                <button class="btn btn-xs btn-outline-primary modify" data-id="{{id}}">
                    <i class="fa fa-pencil"></i> 编辑
                </button>
                <button class="btn btn-xs btn-outline-danger remove" data-id="{{id}}">
                    <i class="fa fa-times"></i> 删除
                </button>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--加载更多-->
<div id="load-more" class="text-sm-center text-primary" style="display: none;">
    <span style="cursor: pointer"><i class="fa fa-hand-o-right"></i> 点击加载更多数据</span>
</div>
<!--正在加载-->
<div id="loading" class="text-sm-center text-gray" style="display: none;">
    <span><i class="fa fa-refresh fa-spin"></i> 正在加载...</span>
</div>
<!--全部加载-->
<div id="load-all" class="text-sm-center text-success" style="display: none;">
    <i class="fa fa-info-circle"></i> 已加载全部数据
</div>
<!--加载失败-->
<div id="load-error" class="text-sm-center text-danger" style="display: none;">
    <i class="fa fa-exclamation-triangle"></i> 加载失败
</div>
<!--详情-->
<div id="detail" class="side-panel right width400 bg-white hide">
    <div class="bg-white" style="padding:20px">
        <input type="hidden" id="id" name="id">
        <div class="form-group">
            <label for="name" class="require">名称</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="请填写名称" required>
        </div>
        <div class="form-group">
            <label for="host" class="require">IP地址</label>
            <input type="text" class="form-control" id="host" name="host" placeholder="请填写IP地址" required>
        </div>
        <div class="form-group">
            <label for="port" class="require">端口</label>
            <input type="number" max="65535" min="0" class="form-control" id="port" name="port" placeholder="请填写端口" required>
        </div>
        <div class="form-group">
            <label for="user" class="require">用户名</label>
            <input type="text" class="form-control" id="user" name="user" placeholder="请填写用户名" required>
        </div>
        <div class="form-group">
            <label for="pass" class="require">密码</label>
            <input type="password" class="form-control" id="pass" name="pass" placeholder="请填写密码" required>
        </div>
        <div class="form-group">
            <label for="ownerId" class="require">责任人</label>
            <div class="select2-info">
                <select class="select2" data-dropdown-css-class="select2-info" data-placeholder="请选择责任人"
                        id="ownerId" name="ownerId" style="width: 100%;" required></select>
            </div>
        </div>
        <div class="bg-white">
            <button id="ok" class="btn btn-info"><i class="fa fa-check"></i> 确定</button>
            <button id="cancel" class="btn btn-default"><i class="fa fa-times"></i> 取消</button>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/select2/js/select2.full.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var select2OwnerCtrl = new Select2Ctrl("#ownerId", Url.baseService.userPage, "id", "userName", "select2");
    select2OwnerCtrl.init();

    var tableCtrl = new TableCtrl(
        Url.automationService.autoSshServerSearchByKeyword,
        Url.automationService.autoSshServerDetail,
        Url.automationService.autoSshServerCreate,
        Url.automationService.autoSshServerModify,
        Url.automationService.autoSshServerRemove,
        function (template, record, index) {
            var statusClass = "bg-warning";
            switch (record.status) {
                case "NORMAL": statusClass = "bg-success"; break;
                case "ABNORMAL": statusClass = "bg-danger"; break;
                case "WAITING": statusClass = "bg-warning"; break;
                default: statusClass = "bg-warning"; break;
            }
            return template
                .replace(new RegExp("{{index}}", "gm"), index + 1)
                .replace(new RegExp("{{id}}", "gm"), record.id)
                .replace(new RegExp("{{name}}", "gm"), record.name)
                .replace(new RegExp("{{host}}", "gm"), record.host)
                .replace(new RegExp("{{port}}", "gm"), record.port)
                .replace(new RegExp("{{user}}", "gm"), record.user)
                .replace(new RegExp("{{arch}}", "gm"), record.arch ? record.arch : "")
                .replace(new RegExp("{{os}}", "gm"), (record.osName ? record.osName : "") + (record.osVersion ? record.osVersion : ""))
                .replace(new RegExp("{{statusClass}}", "gm"), statusClass)
                .replace(new RegExp("{{status}}", "gm"), record.statusValue)
                .replace(new RegExp("{{owner}}", "gm"), record.owner ? record.owner.userName : "")

        },
        function () {
            var record = {};
            record.id = $("#id").val();
            record.name = $("#name").val();
            record.host = $("#host").val();
            record.port = $("#port").val();
            record.user = $("#user").val();
            record.pass = $("#pass").val();
            record.ownerId = $("#ownerId").val();
            return record;
        }
    );
    tableCtrl.extraShowCreate = function() {
        $("#ownerId").val(parent.window.frameCtrl.authCtrl.session.id).trigger("change");
    };

    tableCtrl.getTemplate();
    tableCtrl.getRecords();
    tableCtrl.bindEvent();

    var listener = function (event) {
        if (event.type === "SSH_SERVER_ABNORMAL" || event.type === "SSH_SERVER_NORMAL") {
            tableCtrl.refreshById(event.data);
        }
    };
    listener.owner = window.location.href;
    parent.window.frameCtrl.websockerCtrl.eventListener.push(listener);
</script>

</body>
</html>